<template>
    <div v-if="DetailContent">
        <div class="part clear" >
            <p>宠物携带数量：{{DetailContent.wear.length}}/{{DetailContent.pet_max}}</p>
            <ul class="half" v-for="(item,index) in DetailContent.wear" :key="item.id">
                <li class="half-content">
                    <div class="pic" @click.stop="showorhide(1,index)" ><img :src="imgUrl[item.name]" alt=""></div>
                    <div class="val">
                        <div class="val-txt">评分{{item.pf}}</div>
                        <div class="val-txt">{{sp(item.jn).length}}技能</div>
                    </div>
                </li >               
            </ul>            
        </div>
        <div class="part clear" >
            <p>仓库宠物</p>
            <ul class="half" v-for="(item,index) in DetailContent.warehouse" :key="item.id">
                <li class="half-content">
                    <div class="pic" @click.stop="showorhide(2,index)"><img :src="imgUrl[item.name]" alt=""></div>
                    <div class="val">
                        <div class="val-txt">评分{{item.pf}}</div>
                        <div class="val-txt">{{sp(item.jn).length}}技能</div>
                    </div>
                </li >
            </ul>           
        </div>
        <div class="part clear" >
            <p>回收站（罗道人可找回）</p>
            <ul class="half" v-for="(item,index) in DetailContent.recycle" :key="item.id">
                <li class="half-content">
                    <div class="pic" @click.stop="showorhide(3,index)"><img :src="imgUrl[item.name]" alt=""></div>
                    <div class="val">
                        <div class="val-txt">评分{{item.pf}}</div>
                        <div class="val-txt">{{sp(item.jn).length}}技能</div>
                    </div>
                </li >
            </ul>            
        </div>
        <div class="all" v-show="ShowHidden">
            <div class="container outer-container"  @click.stop="" >                                  
                    <pet-content  :List="DetailContent.wear"  :type=type1 v-on:listenSwiper="change1"></pet-content>              
            </div>
        </div>
        <div class="all" v-show="ShowHidden2">
            <div class="container outer-container"  @click.stop="" >                                  
                    <pet-content :List="DetailContent.warehouse" :type=type2 v-on:listenSwiper="change2"></pet-content> 
            </div>             
        </div>
        <div class="all" v-show="ShowHidden3">
            <div class="container outer-container"  @click.stop="" >                                  
                    <pet-content :List="DetailContent.recycle" :type=type3 v-on:listenSwiper="change3"></pet-content>    
            </div>          
        </div>
    </div>
</template>
<script>
import  PetContent from '@/pages/detail/components/parts/beauty/PetContent'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import axios from "axios";
import Pictures from "@/pages/common/Pictures";
export default {
    components:{
    PetContent 
    },
    data(){
        return{
            current:0,
            ShowHidden: false,
            ShowHidden2: false,
            ShowHidden3: false,
            DetailContent:{},
            imgUrl:Pictures.imgUrl,
            swipereven1:null,
            swipereven2:null,
            swipereven3:null,
            type1:"t1",
            type2:"t2",
            type3:"t3",
        }
    },
    computed:{
        sp(){
            return function(sign){
                return (sign+'').split(';');
                };
            },
    },
    mounted () {
        document.addEventListener('click', this.HiddenClick)
        var id =this.$route.query.id   
     axios.get("http://81.68.253.206:8081/page/getPet?id="+id
    ).then(res=>{
      
      if(res.data&&res.data.data&&res.data.status){
        this.DetailContent=res.data.data;
      }
    })
    },
    methods:{
        HiddenClick () {
        this.ShowHidden = false,
        this.ShowHidden2 = false,
        this.ShowHidden3 = false
        },
        change1(data){
            this.swipereven1=data;
        },
         change2(data){
            this.swipereven2=data;
        },
         change3(data){
            this.swipereven3=data;
        },
        showorhide(petindex,swipindex){
            if(petindex==1){
                this.ShowHidden = !this.ShowHidden;
                  if(this.swipereven1){
                this.swipereven1.slideTo(swipindex,0,false)
            }
            }else  if(petindex==2){
                this.ShowHidden2 = !this.ShowHidden2;
                  if(this.swipereven2){
                this.swipereven2.slideTo(swipindex,0,false)
            }
            }else  if(petindex==3){
                this.ShowHidden3 = !this.ShowHidden3;
                  if(this.swipereven3){
                this.swipereven3.slideTo(swipindex,0,false)
            }
            }
          
        }
      }
    }
    

</script>
<style lang="scss" scoped>
.part{
    position: relative;
    width: 100%;
    padding:rem(10) rem(30) rem(30);
    background-color: #fff;
    margin-bottom: rem(13);

    p{
        height: rem(50);
        line-height: rem(50);
        font-size: rem(40);
        font-weight: 700;;
        margin-left: rem(30);
        margin-bottom: rem(20);
    }
    p::before{
        content: '';
        overflow: hidden;
        position: absolute;
        top: rem(55);
        left: rem(30);
        width: rem(8);
        height: rem(40);
        line-height: rem(40);
        background-color:#e74e4b;
    }
    .half{
        width: 100%;
        position: relative;
        .half-content{
            display: flex;
            width: 50%;
            float: left;
            height: rem(160);
            line-height: rem(160);
            font-size: rem(40);
            margin-top: rem(50);
            .pic{
                width: rem(150);
                height: rem(150);
                img{
                width: rem(150);
                height: rem(150);
                border: 1px solid #888;
                border-radius: rem(15);
                }

            }
            .val{
                flex: 1;
                font-size: rem(35);
                height: rem(160);
                line-height: rem(160);
                margin-left: rem(20);
               
                .val-txt{
                    width: 100%;
                    height: rem(55);
                    line-height: rem(55);
                }
                .val-txt-level{
                    font-size: rem(40);
                    width: 100%;
                    height: rem(55);
                    line-height: rem(55);
                }
                
            }

        }                
    }
}
.highlight{
    width: 100%;
    height: rem(60);
    line-height: rem(60);
    .highlight-item{
        display: inline-block;
        padding: 0 rem(15);
        font-size: rem(35);
        color: #ee8381;
        border: 1px solid #f7c9c9;
        border-radius: rem(10);
        margin-right: rem(20);
    }
    }
.all{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 996;
    background: rgba(0,0,0,.4);
        .container{
        width: 100%;
        min-width: 320px;
        max-width: 750px;
        height: 88%;
        position: fixed;
        bottom: 0;
        z-index: 999;
        opacity: 1;
        background-color:#fff;
        overflow: auto;
        }
}

</style>